<template>
  <el-card class="widget-view"
           :header="element.name"
           :body-style="element.options.bodyStyle"
           :shadow="element.options.shadow"
           :style="{width: element.options.style.width}"
           :class="{active: selectWidget.key == element.key}"
  >
    <el-row type="flex">
      <el-col>
        <draggable
                v-model="element.list"
                :no-transition-on-drag="true"
                v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
                @end="handleMoveEnd"
                @add="handleWidgetCardAdd($event, element)"
        >
          <transition-group name="fade" tag="div" class="widget-card-list">
            <template v-for="(element_, index_) in element.list">
              <template v-if="element_.type == 'grid'">
                <fm-grid v-if="element_ && element_.key"
                         :key="element_.key"
                         :data="element_"
                         :index="index_"
                         :select="selectWidget"
                         @click.native.stop="handleSelectWidget(index_)"
                         @widget-delete="handleWidgetGridDelete(index_)"
                         @move-end="handleMoveEnd">
                </fm-grid>
              </template>
              <template v-else>
                <widget-form-item
                        v-if="element_ && element_.key"
                        :key="element_.key"
                        :element="element_"
                        :select.sync="selectWidget"
                        :index="index_"
                        :data="element">
                </widget-form-item>
              </template>
            </template>
          </transition-group>
        </draggable>
      </el-col>
    </el-row>
    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <i class="iconfont icon-trash" @click.stop="handleWidgetDelete"></i>
    </div>
    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
  </el-card>
</template>

<script>
    import Draggable from 'vuedraggable'
    import WidgetFormItem from '../WidgetFormItem'
    import FmGrid from '../FmGrid'
    export default {
        components: {
            Draggable,
            WidgetFormItem,
            FmGrid
        },
        props: {
            data: Object,
            index: Number,
            select: Object,
            widgetDelete: Function,
            moveEnd: Function
        },
        data() {
            return {
                selectWidget: this.select,
                element: this.data,
            }
        },
        methods: {
            handleMoveEnd({newIndex, oldIndex}) {
                this.$emit('move-end', newIndex, oldIndex)
            },

            handleSelectWidget(index) {
                console.log(index, '#####')
                this.selectWidget = this.data.list[index]
            },

            handleWidgetCardAdd($event, card) {
                console.log('cardadd', $event)
                const newIndex = $event.newIndex
                const oldIndex = $event.oldIndex
                const item = $event.item

                // 防止布局元素的嵌套拖拽
                if (item.className.indexOf('data-grid') >= 0) {

                    // 如果是列表中拖拽的元素需要还原到原来位置
                    item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, card.list[newIndex])

                    card.list.splice(newIndex, 1)

                    return false
                }

                console.log('from', item)

                const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)

                this.$set(card.list, newIndex, {
                    ...card.list[newIndex],
                    options: {
                        ...card.list[newIndex].options,
                        remoteFunc: 'func_' + key
                    },
                    key,
                    // 绑定键值
                    model: card.list[newIndex].type + '_' + key,
                    rules: []
                })

                if (card.list[newIndex].type === 'radio' || card.list[newIndex].type === 'checkbox' || card.list[newIndex].type === 'select') {
                    this.$set(card.list, newIndex, {
                        ...card.list[newIndex],
                        options: {
                            ...card.list[newIndex].options,
                            options: card.list[newIndex].options.options.map(item => ({
                                ...item
                            }))
                        }
                    })
                }

                if (card.list[newIndex].type === 'grid') {
                    this.$set(card.list, newIndex, {
                        ...card.list[newIndex],
                        columns: card.list[newIndex].columns.map(item => ({...item}))
                    })
                }

                this.selectWidget = card.list[newIndex]
            },

            handleWidgetDelete(evt) {
                this.$emit('widget-delete', evt);
            },

            handleWidgetGridDelete(index) {
                if (this.data.list.length - 1 === index) {
                    if (index === 0) {
                        this.selectWidget = {}
                    } else {
                        this.selectWidget = this.data.list[index - 1]
                    }
                } else {
                    this.selectWidget = this.data.list[index + 1]
                }

                this.$nextTick(() => {
                    this.data.list.splice(index, 1)
                })
            },

        },
        watch: {
            select(val) {
                this.selectWidget = val
            },
            selectWidget: {
                handler(val) {
                    this.$emit('update:select', val)
                },
                deep: true
            }
        }
    }
</script>
